<template>
    <el-autocomplete v-model="model" :data="dataList" @on-search="handleSearch" placeholder="请输入..." @on-change="onChange">
    </el-autocomplete>
</template>
<script>
import axios from 'axios';
import Qs from 'qs';
import Vue from 'vue';
export default {
    name: 'autocompleteassist',
    props: {
        value: {
            type: String,
            default () {
                return "";
            }
        },
        url: { /*数据源链接*/
            type: String,
            default () {
                return "";
            }
        },
        relationKey: {
            type: String,
            default () {
                return "";
            }
        },
        relation: {
            type: String,
            default () {
                return "";
            }
        },
        suffixCut: {
            type: String,
            default () {
                return "";
            }
        }
    },
    data() {
        return {
            model: this.value,
            dataList: [],
            relationMap: {}
        }
    },
    methods: {
        handleSearch(value, option) {
            if (value === '') {
                return;
            }

            console.log(" handleSearch(%s)", value);
            Vue.axios.get(this.url, { params: { name: value } })
                .then(response => {
                    this.relationMap = {};
                    const list = response.data.data.map(item => {
                        if (this.relationKey && this.relationKey !== "") {
                            this.relationMap[item.name] = item[this.relationKey];
                        }

                        return item.name;
                    });
                    this.dataList = list;


                })
                .catch(err => {
                    console.log(" handleSearch err %s", err);
                    this.dataList = [];
                })
        },
        /* value是完整的“宏瑞律师事务所” */
        onChange(value) {
            console.log(" onChange(%s)", value);
            if (this.relation !== "") {
                this.$emit('change', { key: this.relation, val: this.relationMap[value] }); /* 为了触发<form-create>的@lawfirm-change事件 */
            }

            let suffixCut = this.suffixCut;
            if (suffixCut && this.endWith(value, suffixCut)) {
                /*
                 * 如果存在suffixCut，那么返回的实际值就不包含suffixCut
                 * 对于：上海第一中级人民法院，如果存在suffixCut，则返回“上海第一中级”
                 */
                value = value.substring(0, value.length - suffixCut.length);
            }

            this.$emit('input', value);
        },
        /* 
         * 输入：宏瑞律师事务所，有后缀“律师事务所”，返回“宏瑞律师事务所”，input中显示“宏瑞律师事务所”
         * 输入：宏瑞，无后缀“律师事务所”，加上后缀，返回“宏瑞律师事务所”，input中显示“宏瑞律师事务所”
         */
        reformValue(value) {
            let suffixCut = this.suffixCut;
            if (suffixCut) {
                if (this.endWith(value, suffixCut)) {
                    return value;
                }
                return value + suffixCut;
            }
            return value;
        },
        endWith(value, str) {
            if (str == null || str === "" || value.length === 0 || str.length > value.length) {
                return false;
            }
            if (value.substring(value.length - str.length) === str) {
                return true;
            }
            return false;
        }
    }
}
</script>